<template>
  <div class="bigbox">
    <div class="btns">
      <div>
        <a-button size="small" @click="handleStartGame">开始</a-button>
        <a-button size="small" @click="ResetBtn">重置</a-button>
      </div>
      <div>
        <span>分数：</span>
        <span id="woshifenshu">0</span>
        <span>分</span>
      </div>
    </div>
    <Game></Game>
    <div class="directionbox">
      <a-button type="primary" size="large" @click="toprotate" shape="circle">
        <template #icon><RedoOutlined /></template>
      </a-button>
      <div class="directionmind">
        <a-button
          type="primary"
          size="large"
          @click="leftMoveBox"
          shape="circle"
        >
          <template #icon><ArrowLeftOutlined /></template>
        </a-button>
        <a-button
          type="primary"
          size="large"
          @click="rightMoveBox"
          shape="circle"
        >
          <template #icon><ArrowRightOutlined /></template>
        </a-button>
      </div>
      <a-button
        type="primary"
        size="large"
        @click="bottomMoveBox"
        shape="circle"
      >
        <template #icon><ArrowDownOutlined /></template>
      </a-button>
    </div>
    <a-alert message="PC端可使用方向键控制" closable type="info" />
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import Game from "./components/Game.vue";
import {
  RedoOutlined,
  ArrowDownOutlined,
  ArrowRightOutlined,
  ArrowLeftOutlined,
} from "@ant-design/icons-vue";
import {
  startGame,
  rightMoveBox,
  leftMoveBox,
  toprotate,
  addBox,
  bottomMoveBox,
} from "./game";
function handleStartGame() {
  startGame();
}
function ResetBtn() {
  location.reload();
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.bigbox {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.btns {
  width: 100%;
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}
.btns button {
  margin-right: 15px;
}
.directionbox {
  /* background-color: pink; */
  text-align: center;
  margin: 10px 0;
  width: 170px;
  height: 170px;
}
.directionbox .ant-btn-icon-only.ant-btn-lg {
  width: 55px;
  height: 55px;
  font-size: 24px;
}
.directionmind {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
